<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，可根据需要调整 */
       .outer-box {
            border: 5px solid black;
            background-color:white;
            padding: 9rem;
            border-radius: 0.5rem;
        }

       .inner-box {
            border: 5px solid black;
            background-color:white;
            padding: 5rem;
            border-radius: 0.375rem;
        }
    </style>
</head>

<body class="bg-gray-100 min-h-screen flex justify-center items-center">
    <div class="outer-box">
        <form id="loginForm" class="inner-box">
            <h3 class="text-lg font-bold mb-4">用户登录</h3>
            <div class="mb-4">
                <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                <input type="text" id="username" name="username"
                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>
            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                <input type="password" id="password" name="password"
                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>
            <div class="flex justify-between">
                <input type="submit" value="提交"
                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <input type="reset" value="重置"
                    class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            </div>
        </form>
    </div>
    <script>
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            let isValid = true;

            // 用户名必填项验证
            if (username === '') {
                alert('用户名不能为空');
                document.getElementById('username').focus();
                isValid = false;
            }
            // 用户名长度验证
            else if (username.length < 8 || username.length > 20) {
                alert('用户名长度需在8到20个字符之间');
                document.getElementById('username').focus();
                isValid = false;
            }

            // 密码必填项验证
            if (password === '') {
                alert('密码不能为空');
                document.getElementById('password').focus();
                isValid = false;
            }
            // 密码长度验证
            else if (password.length < 8 || password.length > 20) {
                alert('密码长度需在8到20个字符之间');
                document.getElementById('password').focus();
                isValid = false;
            }

            if (isValid) {
                // 这里可以添加提交到服务器的逻辑，比如使用fetch等
                console.log('数据合法，可进行提交');
            }
        });
    </script>
</body>

</html>    